`UnderlineNav`: Improve flickering by moving icon visibility control to a one-way CSS animation by iansan5653 · Pull Request #8108 · primer/react

iansan5653 · 2026-07-02T14:57:42Z

Resolves https://github.com/github/primer/issues/6806

The icons in UnderlineNav can cause flickering as they cause/un-cause the container to overflow when hidden/shown. We use JS to update state to prevent this flickering, but that doesn't run until after hydration. This means that, for certain screen sizes, the icons will flicker after SSR and before client-size hydration.

This PR moves the icon visibility logic to a one-way CSS animation on supported browsers. This way, when the scroll-driven animation is triggered, it triggers the corresponding icon-hiding animation, which persists and keeps the icons hidden for the remaining life of the component.

This improves the performance significantly by shifting the calculations into CSS in supported browsers (ie, not in Firefox). This reduces the visibility of the flickering. However, unfortunately it does not completely resolve the flickering; the browser still has to paint the tabs in order to determine the overflow and then hide the icons.

Changelog

New

Changed

Fixed icon flickering before initial render in UnderlineNav

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

changeset-bot · 2026-07-02T14:57:46Z

🦋 Changeset detected

Latest commit: fc168b4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-07-02T14:58:24Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. If this doesn't work, you can also use the original workflow here. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

Copilot

Pull request overview

This PR updates UnderlineNav to avoid SSR→hydration icon flicker by removing the JS “has ever overflowed” state and attempting to move icon-hiding logic entirely into CSS via scroll-driven animations.

Changes:

Removed hasEverOverflowed state and the data-hide-icons attribute from UnderlineNav.tsx.
Added a new hide-icons animation in UnderlineNav.module.css, intended to run once and then keep icons hidden permanently by controlling animation play state via the existing scroll-driven overflow detection.
Minor string literal change for the overflow menu button aria-label.

Show a summary per file

File	Description
packages/react/src/UnderlineNav/UnderlineNav.tsx	Removes JS-based icon hiding (`hasEverOverflowed` / `data-hide-icons`) to rely on CSS-only behavior.
packages/react/src/UnderlineNav/UnderlineNav.module.css	Adds a one-shot animation approach intended to hide icons without JS and prevent overflow-driven flicker loops.

Review details

Files reviewed: 3/3 changed files
Comments generated: 2
Review effort level: Low

github-actions · 2026-07-02T16:24:23Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. If this doesn't work, you can also use the original workflow here. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

…react into fix-underlinenav-flicker

primer-integration · 2026-07-06T20:54:04Z

Integration test results from github/github-ui PR:

CI Failed
VRT Failed
Projects Passed

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

VRT check ensures that when visual differences are detected, the PR cannot proceed until someone acknowledges the changes by adding the "visual difference acknowledged" label.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

Move icon visibility control to full CSS with unidirectional control

a789e19

iansan5653 requested a review from a team as a code owner July 2, 2026 14:57

iansan5653 requested review from TylerJDev and Copilot July 2, 2026 14:57

Copilot started reviewing on behalf of iansan5653 July 2, 2026 14:58 View session

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 2, 2026

Add changeset

302d679

joshblack approved these changes Jul 2, 2026

View reviewed changes

Copilot AI reviewed Jul 2, 2026

View reviewed changes

Comment thread packages/react/src/UnderlineNav/UnderlineNav.tsx

Comment thread packages/react/src/UnderlineNav/UnderlineNav.module.css

github-actions Bot requested a deployment to storybook-preview-8108 July 2, 2026 15:02 Abandoned

iansan5653 deployed to github-pages July 2, 2026 15:12 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 15:19 Inactive

Remove data-hide-icons attribute selector

6fac497

iansan5653 added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Jul 2, 2026

iansan5653 had a problem deploying to github-pages July 2, 2026 15:46 — with GitHub Actions Failure

bump

a10a95c

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 15:57 Inactive

iansan5653 had a problem deploying to github-pages July 2, 2026 16:06 — with GitHub Actions Failure

iansan5653 added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jul 2, 2026

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 16:16 Inactive

test(vrt): update snapshots

a1f49a5

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 2, 2026

primer Bot had a problem deploying to github-pages July 2, 2026 16:33 Failure

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 16:43 Inactive

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 21:48 Inactive

Attempt to revert snapshots

6b360c1

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 22:00 Inactive

iansan5653 deployed to github-pages July 2, 2026 22:08 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 22:08 Inactive

llastflowers added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Jul 2, 2026

test(vrt): update snapshots

2c8e848

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jul 2, 2026

primer Bot deployed to github-pages July 2, 2026 23:03 View deployment

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 23:04 Inactive

Merge branch 'main' into fix-underlinenav-flicker

c9c8c00

llastflowers had a problem deploying to github-pages July 2, 2026 23:34 — with GitHub Actions Failure

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 23:34 Inactive

revert mismatched snapshots to main version

b3e85f5

llastflowers deployed to github-pages July 2, 2026 23:52 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8108 July 2, 2026 23:52 Inactive

llastflowers added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jul 2, 2026

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jul 3, 2026

iansan5653 commented Jul 6, 2026

View reviewed changes

Comment thread packages/react/src/UnderlineNav/UnderlineNav.module.css Outdated

Fix visibility delay

aa035a8

iansan5653 changed the title ~~UnderlineNav: Fix flickering by moving icon visibility control to pure CSS~~ UnderlineNav: Fix flickering by moving icon visibility control to a one-way CSS animation Jul 6, 2026

iansan5653 deployed to github-pages July 6, 2026 15:37 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8108 July 6, 2026 15:37 Inactive

iansan5653 added 2 commits July 6, 2026 16:14

Simplify and remove delayed visibility

91f39db

Merge branch 'fix-underlinenav-flicker' of https://github.com/primer/…

fc168b4

…react into fix-underlinenav-flicker

iansan5653 deployed to github-pages July 6, 2026 16:29 — with GitHub Actions View deployment

github-actions Bot deployed to storybook-preview-8108 July 6, 2026 16:29 View deployment

iansan5653 changed the title ~~UnderlineNav: Fix flickering by moving icon visibility control to a one-way CSS animation~~ UnderlineNav: Improve flickering by moving icon visibility control to a one-way CSS animation Jul 6, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

`UnderlineNav`: Improve flickering by moving icon visibility control to a one-way CSS animation#8108

`UnderlineNav`: Improve flickering by moving icon visibility control to a one-way CSS animation#8108
iansan5653 wants to merge 18 commits into
mainfrom
fix-underlinenav-flicker

iansan5653 commented Jul 2, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 2, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 2, 2026

Uh oh!

Uh oh!

primer-integration Bot commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

iansan5653 commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 2, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 2, 2026

⚠️ Action required

Uh oh!

Uh oh!

primer-integration Bot commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

iansan5653 commented Jul 2, 2026 •

edited

Loading

changeset-bot Bot commented Jul 2, 2026 •

edited

Loading